<template>
  <div class="header">
    <div class="left">
      <span style="font-size: 20px">{{ name }}</span>
    </div>
    <div class="right">
      <el-popover
        placement="bottom"
        :width="200"
        trigger="click"
        popper-class="popper-user-box"
      >
        <template #reference>
          <div class="author">
              <i class="icon el-icon-s-custom" />
             {{userInfo&&userInfo.nickName ||''}}
              <i class="el-icon-caret-bottom" />
          </div>
        </template>
        <div class="nickname">
            <p>登录名：{{userInfo&&userInfo.loginUserName|| ''}}</p>
            <p>昵称：{{userInfo&&userInfo.nickName|| ''}}</p>
            <el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { reactive,onMounted,toRefs } from "vue";
import { useRouter } from "vue-router";
import axios from '@/utils/axios'
import {localRemove,pathMap} from '@/utils'
export default {
  name: "Header",
  setup() {
    // 获取实例路由
    const router = useRouter();
    const state=reactive({
        name:'dashboard',
        userInfo:null,  //用户信息变量
    })
    // 初始化执行方法
    onMounted(()=>{
        // console.log('window',window.location.hash);
        const pathname=window.location.hash.split('/')[1] || ''
        if(!['login'].includes(pathname)){
            getUserInfo()
        }
    })
    // 获取用户信息
    const getUserInfo=async()=>{
        const userInfo=await axios.get('/adminUser/profile')
        // console.log('',userInfo.loginUserName);
        
        state.userInfo=userInfo
        // console.log('state',state.userInfo.loginUserName);
        
    }
    //退出登录
    const logout=()=>{
        axios.delete('/logout').then(()=>{
            localRemove('token')
            router.push({path:'/login'})
        })
    }
    // 监听路由变化方法
    router.afterEach((to) => {
      // console.log("to", to);
      // to能获取路由的相关信息
      const { id } = to.query;
      state.name = pathMap[to.name];
    });



    return {
      ...toRefs(state),
      logout
    };
  },
};
</script>

<style scoped>
.header {
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.right > div > .icon{
    font-size: 18px;
    margin-right: 6px;
  }
  .author {
    margin-left: 10px;
    cursor: pointer;
  }
</style>
<style>
  .popper-user-box {
    background: url('https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png') 50% 50% no-repeat!important;
    background-size: cover!important;
    border-radius: 0!important;
  }
   .popper-user-box .nickname {
    position: relative;
    color: #ffffff;
  }
  .popper-user-box .nickname .logout {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
</style>